<template>
  <div class="vip">
    <div class="permission-beans-info flex-row justify-content-around align-items-center">
      <div>
        <p class="p-30-bolder">{{integral}}</p>
        <p>我的欢乐豆</p>
      </div>
      <div>
        <p class="p-30-bolder">{{quarter_contribution}}</p>
        <p>好友本季度消费</p>
      </div>
      <div>
        <p class="p-30-bolder">{{total_contribution}}</p>
        <p>好友总消费</p>
      </div>
    </div>
    <div class="flex-column align-items-center">
      <div class="title">当前会员等级：{{level_name}}</div>
      <div class="maturity-time" v-if="grade_expire_time != 0">有效期：{{grade_expire_time}}</div>
    </div>
    <div class="Grade-box flex-row align-items-center justify-content-center">
      <div
        v-for="(item,index) in vipList"
        :key="index"
        class="Grade flex-column justify-content-center align-items-center"
      >
        <el-radio
          v-model="priceRadio"
          :label="index"
          border
          :disabled="item.need>integral"
        >{{item.name}}</el-radio>
      </div>
    </div>
    <div v-if="vipList.length !==0" style="margin-top:40px;">
      <div v-if='vipList[priceRadio].charge_type ==="upgrade_list"'>
        <div class="flex-row justify-content-center align-items-center">
          <div
            v-for="(item,index) in vipList[priceRadio].upgrade_list"
            :key="index"
            class="Grade flex-column justify-content-center align-items-center"
          >
            <el-radio v-model="radio1" :label="index" border>{{item.day}}天</el-radio>
            <p class="flex-row justify-content-start align-items-center" style="width:100%;">
              <span class="price">{{item.price}}</span>
              <span class="origin_price">{{item.origin_price}}</span>
            </p>
          </div>
        </div>
        <div
          v-if="vipList[priceRadio].upgrade_list.length ==0"
        >{{vipList[priceRadio].upgrade_diff.upgrade_mess}}</div>
      </div>
      <div v-if='vipList[priceRadio].charge_type ==="upgrade_diff"'>{{vipList[priceRadio].upgrade_diff.upgrade_mess}}</div>
    </div>
    <div style="margin-top:100px;" v-if="vipList.length !== 0">
      <el-button
        type="primary"
        shadow="always"
        style="width:240px;"
        @click="openFeatures"
        :disabled="btnDisabled"
      >{{btnMessges}}</el-button>
    </div>
    <div class="note">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>注意事项</span>
        </div>
        <div class="text item" v-html="message"></div>
      </el-card>
    </div>
    <el-dialog
      title="提示"
      :visible.sync="centerDialogVisible"
      width="20%"
      center>
      <div style=" text-align:center;">是否升级/续费</div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="upVip">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {},
  data () {
    return {
      radio1: 0,
      uuid: sessionStorage.getItem('u'),
      integral: 0.0,
      quarter_contribution: 0.0,
      total_contribution: 0.0,
      funInfo: [{ open: false, forever: false, endtime: '' }],
      function_id: 1,
      funDetail: [],
      priceRadio: 0,
      vipList: [],
      btnMessges: '开通',
      message: '',
      btnDisabled: true,
      level_name: '',
      grade_expire_time: '0',
      centerDialogVisible: false,
      isConfirm: false
    }
  },
  computed: {},
  created () {
    this.getUserInfo()
    this.getLevelListVip()
  },
  mounted () {},
  watch: {
    priceRadio (curVal, oldVal) {
      // console.log(curVal, oldVal);
      this.btnMessges = this.vipList[curVal].button_mess
      let str = this.vipList[curVal].message.replace(/\\n/gm, '<br/>')
      console.log(this.vipList[curVal].message)
      this.message = str
      this.btnDisabled = !this.vipList[curVal].can_upgrade
    }
  },
  methods: {
    showConfirm () {
      this.isConfirm = !this.isConfirm
    },
    upVip () {
      this.openVip()
      this.getUserInfo()
      this.priceRadio = 0
      this.centerDialogVisible = !this.centerDialogVisible
    },
    openFeatures () {
      // if(this.vipList[this.priceRadio].charge_type === 'upgrade_diff'){
      this.centerDialogVisible = !this.centerDialogVisible
      //   return false
      // }
      // if (this.vipList[this.priceRadio].can_upgrade) {
      //   this.btnDisabled = !this.btnDisabled;
      //   this.openVip();
      //   this.getUserInfo();
      // }
    },
    getUserInfo () {
      let rsaStr = `uuid=${this.uuid}`
      this.$getCode(rsaStr).then(rsaCode => {
        this.http
          .getUserInfo(rsaCode)
          .then(res => {
            if (res.data.errno === '000') {
              this.integral = res.data.result.data.integral
              this.quarter_contribution =
                res.data.result.data.quarter_contribution
              this.total_contribution = res.data.result.data.total_contribution
              this.level_name = res.data.result.data.level_name
              this.grade_expire_time = res.data.result.data.grade_expire_time
            }
          })
          .catch(err => {
            // console.log(err);
          })
      })
    },
    getLevelListVip () {
      let rsaStr = `timestamp=${Date.parse(new Date())}`
      this.$getCode(rsaStr).then(rsaCode => {
        this.http
          .levelListVip(rsaCode)
          .then(res => {
            if (res.data.errno === '000') {
              this.vipList = res.data.result.data
              this.btnMessges = res.data.result.data[0].button_mess
              var str = res.data.result.data[0].message.replace(
                /\\n/gm,
                '<br/>'
              )
              this.btnDisabled = !res.data.result.data[0].can_upgrade
              this.message = str
            }
          })
          .catch(err => {})
      })
    },
    openVip () {
      let id = this.vipList[this.priceRadio].charge_type === 'upgrade_list' ? this.vipList[this.priceRadio].upgrade_list[this.radio1].id : this.vipList[this.priceRadio].upgrade_diff.id
      let level_id = this.vipList[this.priceRadio].charge_type === 'upgrade_list' ? this.vipList[this.priceRadio].upgrade_list[this.radio1].level_id : this.vipList[this.priceRadio].upgrade_diff.level_id
      let rsaStr = `level_id=${level_id}&id=${id}`
      // console.log(rsaStr)
      this.$getCode(rsaStr).then(rsaCode => {
        this.http
          .levelUpgradeVip(rsaCode)
          .then(res => {
            this.btnDisabled = !this.btnDisabled
            this.$message.closeAll()
            if (res.data.errno === '000') {
              this.$message.success(res.data.errmsg)
              this.getLevelListVip()

              // this.getUserInfo()
              // this.vipList = res.data.result.data;
              // this.btnMessges = res.data.result.data[0].button_mess;
              // var str = res.data.result.data[0].message.replace(
              //   /\\n/gm,
              //   "<br/>"
              // );
              // this.messges = str;
            } else {
              this.$message.error(res.data.errmsg)
            }
          })
          .catch(err => {})
      })
    }
  },
  components: {}
}
</script>

<style scoped lang="less">
@import url("./index.less");
</style>
